<template>
  <div class="building-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="search-label">企业名称：</div>
      <el-input v-model.trim="params.name" clearable placeholder="请输入内容" class="search-main" />
      <el-button type="primary" @click="searchBtn">查询</el-button>
    </div>
    <div class="create-container">
      <el-button type="primary" @click="$router.push('/addEnterprise')">添加企业</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table style="width: 100%" :data="enterpriseList" @expand-change="expandHandle">
        <!-- 展开行 -->
        <el-table-column type="expand">
          <template #default="{row}">
            <el-table :data="row.rentList">
              <el-table-column label="租赁楼宇" width="320" prop="buildingName" />
              <el-table-column label="租赁起始时间" prop="startTime" />
              <el-table-column label="合同状态" prop="status">
                <template #default="scope">
                  <span>{{ getStatusText(scope.row.status) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="180">
                <template #default="scope">
                  <el-button size="mini" type="text" @click="handleRenew(scope.row.id)">续签</el-button> <!--  :disabled="scope.row.status !== 1" -->
                  <el-button size="mini" type="text" :disabled="scope.row.status === 3" @click="handleReturn(scope.row.id)">退租</el-button>
                  <el-button size="mini" type="text" :disabled="scope.row.status !== 3" @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column type="index" label="序号" />
        <el-table-column label="企业名称" width="320" prop="name" />
        <el-table-column label="联系人" prop="contact" />
        <el-table-column label="联系电话" prop="contactNumber" />
        <el-table-column label="操作">
          <!-- <template> -->
          <template #default="scope">
            <el-button size="mini" type="text" @click="addRentBTn(scope.row.id)">添加合同</el-button>
            <el-button size="mini" type="text" @click="$router.push(`/preview?id=${scope.row.id}`)">查看</el-button>
            <el-button size="mini" type="text" @click="$router.push(`/addEnterprise?id=${scope.row.id}`)">编辑</el-button>
            <el-button size="mini" type="text" @click="delBtn(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-container">
      <el-pagination layout="total, prev, pager, next" :total="total" :page-size="params.pageSize" :current-page.sync="params.page" @current-change="handleCurrentChange" />
    </div>

    <Rent :rentvisible.sync="rentDialogVisible" :idcurrent="currenId" @refresh="getEnterprise" />
  </div>
</template>

<script>
import { deleteEnterprise, getEnterpriseList, getRentList } from '@/api/enterprise'
import Rent from './components/Rent.vue'
import { delRent, quitRent } from '@/api/rent'

export default {
  name: 'Enterprise',
  // import引入的组件需要注入到对象中才能使用
  components: {
    Rent
  },
  data() {
    // 这里存放数据
    return {
      enterpriseList: [],
      params: {
        name: '',
        page: 1,
        pageSize: 5
      },
      total: null,
      rentDialogVisible: false,
      currenId: null
    }
  },
  created() {
    this.getEnterprise()
  },
  methods: {
    async getEnterprise() {
      const { data: { rows, total }} = await getEnterpriseList(this.params)
      this.enterpriseList = rows.map(Item => {
        return {
          ...Item,
          rentList: []
        }
      })
      this.total = total
    },
    // 根据id获取详情
    async getDetail(id) {
      return await getRentList(id)
    },
    // 展开行
    async expandHandle(row) {
      const flag = this.enterpriseList.find(item => item.id === row.id)
      if (!flag) return
      const res = await getRentList(row.id)
      console.log(res)
      this.$nextTick(() => {
        row.rentList = res.data
      })
    },
    handleCurrentChange(value) {
      this.params.page = value
      this.getEnterprise()
    },
    getStatusText(status) {
      switch (status) {
        case 0:
          return '待生效'
        case 1:
          return '生效中'
        case 2:
          return '已到期'
        case 3:
          return '已退租'
        default:
          return '未知状态'
      }
    },
    searchBtn() {
      this.params.page = 1
      this.getEnterprise()
    },
    // 删除功能实现
    delBtn(id) {
      this.$confirm('是否确定删除企业?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await deleteEnterprise(id)
        this.getEnterprise()
        // this.$message({
        //   type: 'success',
        //   message: '删除成功!'
        // })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 添加合同
    addRentBTn(id) {
      this.currenId = id
      this.rentDialogVisible = true
    },
    handleRenew(id) {
      // if (row.status !== 1) {
      //   this.$message.error('只有生效中的合同才能续签')
      //   return
      // }
      // 续签逻辑
      console.log('续签合同:', id)
    },
    async handleReturn(id) {
      this.getEnterprise()
      this.$confirm('确认退租吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 1. 调用接口
        await quitRent(id)
        // 2. 重新拉取列表
        this.getEnterprise()
        this.$message({
          type: 'success',
          message: '退租成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '退租失败'
        })
      })
    },
    handleDelete(id) {
      // 删除逻辑
      this.getEnterprise()
      this.$confirm('确认删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 1. 调用接口
        await delRent(id)
        // 2. 重新拉取列表
        this.getEnterprise()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '删除失败'
        })
      })
    }

  }

}

</script>

<style lang="scss" scoped>
.department-container {
  padding: 10px;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  ;
  padding-bottom: 20px;

  .search-label {
    width: 100px;
  }

  .search-main {
    width: 220px;
    margin-right: 10px;
  }
}

.create-container {
  margin: 10px 0px;
}

.page-container {
  padding: 4px 0px;
  text-align: right;
}

.form-container {
  padding: 0px 80px;
}

</style>
